<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Upterm</title>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400i,700');
            ::selection {
                background: rgba(255, 255, 125, 0.99);
                color: #032764;
            }

            * ::selection {
                background: rgba(255, 255, 125, 0.99);
                color: #032764;
            }

            * {
                box-sizing: border-box;
            }

            ::-webkit-scrollbar {
                display: none;
            }

            html {
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }

            body {
                margin: 0;
            }

            @font-face {
                font-family: "FontAwesome";
                src: url(../../../node_modules/font-awesome/fonts/fontawesome-webfont.ttf) format("truetype");
            }

            @keyframes progress-bar-stripes {
                from {
                    background-position: 0 0;
                }
                to {
                    background-position: 30px 0;
                }
            }

            .application {
                display: grid;
                grid-template-areas: "title-bar" "tab";
                font-size: var(--font-size);
                font-family: var(--font-family);
                background-color: var(--background-color);
                color: var(--text-color);

                --title-bar-height: 28px;
                --footer-height: calc(var(--font-size) * 2);
                --prompt-height: calc(var(--font-size) * 3);
                --session-height: calc(100vh - var(--title-bar-height));
                --prompt-font-size: calc(var(--font-size) + 2px);
            }

            .title-bar {
                border-bottom: 1px solid #191C22;
                display: flex;
                grid-area: title-bar;
                height: var(--title-bar-height);
                -webkit-app-region: drag;
                background: #242A31;
            }

            .title-bar .search {
                margin-top: 3px;
            }

            .title-bar.reversed .search {
                order: 3;
            }

            .title-bar .search .search-icon {
                position: relative;
                left: var(--font-size);
                top: -1px;
                font-size: calc(var(--font-size) - 4px);
                font-family: FontAwesome;
            }

            .title-bar .search .search-input {
                --search-input-height: calc(var(--title-bar-height) - 6px);
                -webkit-app-region: no-drag;
                font-size: var(--font-size);
                background-color: var(--search-input-color);
                border: 0;
                border-radius: 3px;
                -webkit-appearance: none;
                outline: none;
                height: var(--search-input-height);
                width: 10em;
                padding-left: var(--font-size);
                color: var(--white-color);
            }

            .title-bar .tabs {
                justify-content: center;
                display: flex;
                flex: 1;
                -webkit-margin-before: 0;
                -webkit-margin-after: 0;
                -webkit-padding-start: 0;
                -webkit-user-select: none;
                user-select: none;
                list-style: none;
                padding-left: 68px;
                padding-right: 129px;
            }

            .title-bar.reversed .tabs {
                order: 2;
            }

            .tab-header {
                opacity: 0.3;
                position: relative;
                max-width: 200px;
                flex-grow: 1;
                display: flex;
                text-align: center;
                border: 1px solid #FFFFFF20;
                font-size: 0.852em;
                border-top: 0;
                align-items: center;
                justify-content: center;
                border-radius: 0 0 5px 5px;
            }

            .tab-header[data-focused=true] {
                opacity: 1;

                background-color: #FFFFFF10;
            }

            .tab-header:hover {
                background-color: var(--black-color);
                opacity: 1;
            }

            .tab-header .close-button {
                color: transparent;

                --margin: calc(var(--title-bar-height) - var(--font-size));

                font-family: FontAwesome;
                position: absolute;
                left: var(--margin);
                top: calc(var(--margin) / 2);
                cursor: pointer;
            }

            .tab-header:hover .close-button {
                color: var(--white-color);
            }

            .tab-header:hover .close-button:hover {
                color: var(--red-color);
            }

            .tab {
                grid-area: tab;
            }

            .tab[data-focused=false] {
                display: none;
            }

            .sessions {
                grid-area: tab;
                display: grid;
                background: #212731;
                grid-template-rows: 100%;
                height: var(--session-height);
                border-left: var(--background-color);
            }

            .view-line {
                padding-top: 5px;
            }

            .session .prompt:before {
                z-index: 2;
                grid-area: prompt-decoration;
                content: "";
                position: absolute;
                top: 2px;
                opacity: 0.2;
                left: -27px;
                width: 41px;
                height: 50px;
            }

            .view-lines {
                background-color: #20242B;
            }

            .monaco-editor .margin {
                background-color: #20242B;
            }

            .sessions[data-side-by-side=true] {
                grid-template-columns: 1fr 1fr;
            }

            .session {
                contain: layout;
                position: relative;
                height: var(--session-height);
            }

            .shutter {
                z-index: 5;
                pointer-events: none;
                background-color: var(--white-color);
                opacity: 0.3;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            .session .jobs {
                overflow-y: scroll;
                will-change: transform;
                contain: strict;
                display: flex;
                flex-direction: column-reverse;
                height: calc(calc(var(--session-height) - var(--prompt-height)) - var(--footer-height));
            }

            .session[data-status=in-progress] .jobs {
                height: calc(var(--session-height) - var(--footer-height));
            }

            .output-cut {
                --height: calc(var(--font-size) * 2.6);
                position: relative;
                left: calc(0px - var(--content-padding));
                width: calc(100% + var(--content-padding));
                height: var(--height);
                padding-top: calc(calc(var(--height) - var(--font-size)) / 3);
                text-align: center;
                cursor: pointer;
            }

            .job {
                padding: var(--content-padding);
                background-color: #2D323B;
                margin-top: var(--font-size);
            }

            .job[data-status=failed] {
                --job-background-color: var(--failed-job-background-color);
            }

            .job-header {
                color: var(--job-background-color);
                filter: brightness(260%);
                font-size: var(--prompt-font-size);
                padding-bottom: 3px;
            }

            .job-header .job-actions {
                margin-right: 15px;
                text-align: right;
            }

            .job-header .job-actions .prettify-toggle {
                text-align: center;
                width: 1em;
                display: inline-block;
                margin: 0 3px;
                cursor: pointer;
                font-family: FontAwesome;
                color: var(--white-color);
            }

            .job-header .job-actions .prettify-toggle[data-enabled=true] {
                color: var(--green-color);
            }

            .job-header div {
                white-space: pre;
            }

            .output {
                white-space: pre-wrap;
                position: relative;
            }

            .output[data-buffer-type=normal] {
                contain: paint;
            }

            .output[data-screen-mode=light] {
                background-color: var(--white-color);
                color: var(--black-color);
            }

            .job[data-status=in-progress] .output[data-buffer-type=alternate] {
                background-color: var(--job-background-color);
                position: absolute;
                top: 0;
                bottom: 0;
                left: var(--content-padding);
                right: var(--content-padding);
                z-index: 4;
            }

            .job[data-status=success] .output[data-buffer-type=alternate],
            .job[data-status=failed] .output[data-buffer-type=alternate] {
                zoom: 0.5;
            }

            .output .cursor {
                --scrollback-offset: calc(var(--scrollback-size) * var(--letter-height));
                --row-offset: calc(var(--row-index) * var(--letter-height));
                --column-offset: calc(var(--column-index) * var(--letter-width));

                position: absolute;
                background-color: var(--white-color);
                opacity: 0.6;
                top: calc(var(--scrollback-offset) + var(--row-offset));
                left: var(--column-offset);
                height: var(--letter-height);
                width: var(--letter-width);
            }

            .output .row {
                height: var(--letter-height);
                width: 100%;
            }

            .output .row .char-group {
                display: inline-block;
                height: var(--letter-height);
            }

            .session .prompt {
                --prompt-padding: calc(calc(var(--prompt-height) - var(--prompt-font-size)) / 2.5);
                position: absolute;
                contain: layout;
                bottom: var(--footer-height);
                height: var(--prompt-height);
                width: 100%;
                padding-top: var(--prompt-padding);
                line-height: 1.3;
                display: grid;
                grid-template-areas: "prompt-decoration prompt-content";
                grid-template-columns: calc(var(--prompt-font-size) * 2) auto;
            }

            .session .prompt[data-mode=history-search] {
                grid-template-columns: calc(var(--prompt-font-size) * 8) auto;
            }

            .session[data-status=in-progress] .prompt {
                opacity: 0;
                pointer-events: none;
            }

            .session .prompt:before {
                z-index: 2;
                /* Without this left pane prompt overlaps right pane prompt. */
                grid-area: prompt-decoration;
                filter: brightness(50%);
            }

            .session .prompt[data-mode=normal]:before {
                content: url("../../../images/prompt-decoration.svg");
            }

            .session .prompt[data-mode=history-search]:before {
                content: url("../../../images/prompt-history-mode-decoration.svg");
            }

            .session .prompt-content {
                grid-area: prompt-content;
                font-size: var(--prompt-font-size);
                white-space: pre-wrap;
                -webkit-appearance: none;
                outline: none;
                z-index: 2;
                margin-left: -12px;
                margin-top: -4px;
            }
            .margin-view-overlays {
    background: #1d1f23;
}

            .footer {
                position: absolute;
                z-index: 2;
                bottom: 0;
                height: var(--footer-height);
                width: 100%;
                opacity: 0.7;
                padding: calc(calc(var(--footer-height) - var(--font-size)) / 2) var(--content-padding);
                background-color: #111;
            }

            .footer span {
                margin-right: 1.5em;
            }

            .footer .present-directory:before {
                font-family: "FontAwesome";
                padding-right: 5px;
                content: "\f114";
            }

            .footer .present-directory {
                padding-right: 10px;
            }

            .footer .vcs-data:before {
                padding-right: 5px;
                font-family: "FontAwesome";
                content: "\f126";
            }

            .footer .vcs-data {
                padding-right: 8px;
            }

            .footer .release-component-link {
                cursor: pointer;
                color: var(--green-color);
                float: right;
            }

            /* inline styles can't really handle pseudo elements, so they still need classes */

            .jsonTreeParentNode:before {
                content: "\0025B8 \0000a0";
                margin-left: -1.2em;
            }

            .jsonTreeParentNode.expanded:before {
                content: "\0025BE \0000a0";
            }

            .underlineOnHover:hover {
                text-decoration: underline;
            }

            .session .prompt[data-mode=history-search] .suggest-widget {
                width: 600px !important;
            }

            /* A workaround for https://github.com/Microsoft/monaco-editor/issues/434 */

            .monaco-editor .suggest-widget.no-icons .icon {
                display: none !important;
            }

            .monaco-editor .suggest-widget .monaco-list .monaco-list-row {
                padding-left: 5px;
            }

            /* Display detail for all suggestions, not only for the focused one. */

            .monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.type-label {
                display: inline !important;
                opacity: .3 !important;
                margin-left: 2em !important;
            }

            /* Change info icon color from blue to gray. */

            .monaco-editor .suggest-widget .monaco-list .monaco-list-row>.contents>.main>.readMore {
                background-image: url("") !important;
            }
        </style>
    </head>

    <body>
        <div id="react-entry-point"></div>
    </body>

</html>

<script>
    require("../../src/monaco/Loader.js").requireMonaco(() => require("../../src/views/Main.js"));
</script>

</html>
